<template>
  <div>
    <p>请选择你要购买的书籍</p>
    <ul>
        <li v-for="(ele,i) in arr" :key="i">
            {{ele.name}} <Button @click="buyBook(ele)">买书</Button>
        </li>
    </ul>
    <Table border :data="arr" :columns="columns" show-summary>
    <template slot-scope="{ row }" slot="count">
      <span >{{ row.count * row.price }}</span>
    </template>
    </Table>
    <p>总价格为: {{totalPrice}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
        columns:[
            {
                type:'index',
                title:'序号'
            },
            {
                title:'书名',
                key:'name'
            },
            {
                title:'单价',
                key:'price'
            },
            {
                title:'数量',
                key:'count'
            },
            {
                title: '合计',
                slot: 'count'
            },
        ],
      arr: [
        {
          name: "水浒传",
          price: 107,
          count: 0,
        },
        {
          name: "西游记",
          price: 192,
          count: 0,
        },
        {
          name: "三国演义",
          price: 219,
          count: 0,
        },
        {
          name: "红楼梦",
          price: 178,
          count: 0,
        },
      ],
      totalPrice:0
    };
  },
  methods:{
      buyBook(ele){
        ele.count++
        this.totalPrice+=ele.price
      }
  }
};
</script>